<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='附件管理',active='img'">
<header th:replace="back/header::headerFragment(${title},${active})"></header>
<head>
    <meta th:name="_csrf" th:content="${_csrf.token}"/>
    <!-- 默认的header name是X-CSRF-TOKEN -->
    <meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>


    <link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/css/fileinput.min.css" rel="stylesheet">

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">



    <link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css"
          rel="stylesheet">

<!--    jq-->
    <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>



    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>

    <!-- 如果你想在上传之前修改图片大小需要加入canvas-to-blob.min.js  它必须在fileinput.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js"></script>

    <!-- 如果你想在最初的预览中排序/重新排列需要引入sortable.min.js  它必须在fileinput.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/plugins/sortable.min.js"></script>

    <!-- 如果你想在HTML文件预览中净化HTML内容则要引入purify.min.js is  它必须在fileinput.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/dompurify/1.0.10/purify.min.js"></script>

    <!-- 主要的 fileinput 插件库 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/fileinput.min.js"></script>

    <!-- 如果你想在放大的模态页面中查看文件详细信息需要引入bootstrap.js -->
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- 可选，如果你需要像font awesome 这样的主题，就像下面的代码一样引入它 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/locales/fa.min.js"></script>

    <!-- 可选，如果你需要转换语言或翻译，就包含这个库 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/locales/zh.min.js"></script>


    <script th:src="@{/back/js/bootstrap.js}"></script>
    <script th:src="@{/back/js/sweetalert2.min.js}"></script>
    <script th:src="@{/back/js/jquery.app.js}"></script>
    <script th:src="@{/back/js/base.js}"></script>


    <style type="text/css">
        .topbar{
            height: 70px;
        }
        #up {
            display: none;
        }

        #manager {
            display: none;
        }

        #m1 {
            display: inline;
            white-space: nowrap;
            width: 85px;
            height: 20px;
            float: left;
        }

        #s1 {
            display: inline;
            white-space: nowrap;
            width: 85px;
            height: 20px;
            display: none;
            float: left;
        }

        #s2 {
            display: inline;
            white-space: nowrap;
            width: 85px;
            height: 20px;
            float: left;
        }

        #s3 {
            display: inline;
            white-space: nowrap;
            width: 85px;
            height: 20px;
            float: left;
            display: none;
        }


    </style>

</head>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="back/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">
                            <div id="m1">附件管理</div>
                            <div id="s1"><a id="manager" href="#" onclick="changeStyle2()">附件管理</a></div>
                            <div id="s2"><a href="#" onclick="changeStyle1()">附件上传</a></div>
                            <div id="s3">附件上传</div>
                        </h4>
                    </div>
                    <!--                    图片展示-->

                    <div id="show" class="row">

                        <div class="col-lg-2 col-md-3 col-sm-6 col-6 div-thumbnail img-rounded text-center m-t-10"
                             th:each="img: ${imgs}">
                            <a target="_blank">
                                <img class="img-thumbnail img-fluid img-responsive"
                                     th:src="${img.getSmall_img()}">
                            </a>

                            <div class="clearfix">
                                <a type="button" th:href="@{'/img/dowmloadImg?f='+${img.getId()}}"
                                   class="btn btn-warning btn-sm waves-effect waves-light m-t-5 copy">
                                    <i class="fa fa-copy"></i>
                                    <span>下载</span>
                                </a>
                                <a type="button" href="" class="btn btn-danger btn-sm waves-effect waves-light m-t-5">
                                    <i class="fa fa-trash-o"></i>
                                    <span>删除</span>
                                </a>
                            </div>

                        </div>

                    </div>

                    <!--                    图片上传-->
                    <div id="up" class="col-md-12">


                        <form method="post" th:action="@{/img/imgupload}" class="form-horizontal" role="form"
                              id="global-form" enctype="multipart/form-data">

                            <input id="uploadPicture" name="files" type="file" multiple=true class="file-loading">


                            <div class="clearfix pull-right">
                                <button id="btn1" type="submit"
                                        th:class="'btn btn-'+${bootstrap.randomColor()}+ ' waves-effect waves-light'">
                                    开始上传
                                </button>
                            </div>

                        </form>


                    </div>


                </div>
                                <div th:replace="back/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>
<!--<div th:replace="back/footer :: footer"></div>-->

</body>

<script>

    function changeStyle1() {

        document.getElementById('up').style.display = 'block';
        document.getElementById('show').style.display = 'none';
        document.getElementById('manager').style.display = 'block';
        document.getElementById('m1').style.display = 'none';
        document.getElementById('s2').style.display = 'none';
        document.getElementById('s3').style.display = 'block';
        document.getElementById('s1').style.display = 'block';
    }

    function changeStyle2() {
        document.getElementById('s1').style.display = 'none';
        document.getElementById('m1').style.display = 'block';
        document.getElementById('s2').style.display = 'block';
        document.getElementById('s3').style.display = 'none';
        document.getElementById('manager').style.display = 'none';
        document.getElementById('show').style.display = 'block';
        document.getElementById('up').style.display = 'none';

    }


    $(function () {
        $("#uploadPicture").fileinput({
            uploadUrl: "http://localhost:8080/img/imgupload",
            previewFileType: "image",
            uploadAsync: true,
            showCaption: false,
            allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp"],
            enctype: 'multipart/form-data',
            //隐藏上传按钮
            showUpload: false,
            //最大上传文件数量
            maxFileCount: 8,
            //上传文件最大大小（kb）
            maxFileSize: 5120,
            showBrowse: true,
            dropZoneTitle: '拖拽头像图片到这里...',
            browseLabel: "选择图片",
            uploadClass: "btn btn-info",
            uploadLabel: "上传",
            removeClass: "btn btn-danger",
            autoReplace: true,
            removeLabel: "移除",
            msgSizeTooLarge: '图片文件太大！',
            msgFilesTooMany: "选择上传的文件数量为({n}) 超过允许的最大数值({m})！",
            msgUploadEnd: '图片上传成功！',
            msgUploadBegin: '初始化中...',
            msgZoomModalHeading: '图片详情预览',
            msgInvalidFileExtension: '非法文件扩展名 "{name}"！ 仅支持 "{extensions}" 的文件扩展名！'
        }).on('fileerror', function (event, data, msg) {
            alert('图片上传失败！' + msg);
        }).on('fileuploaded', function (event, data) {
            $("#picName").val(data.response.name);
            $('#uploadPicture').fileinput('disable');
        }).on('fileclear', function (event) {
            alert("图片被清除啦！");
        });

    });


</script>


</html>